<template>
  <div>
    文章类别:
    <el-select
    v-model="value1"
    @change="hChange"
    placeholder="请选择">

      <!-- label: 显示的内容
      value: 选中之后要保存的内容---值 -->
      <el-option
        v-for="item in options"
        :key="item.value"

        :label="item.label"
        :value="item.value">
      </el-option>

    </el-select>

    文章列表：<el-select v-model="value2" placeholder="请选择">

      <!-- label: 显示的内容
      value: 选中之后要保存的内容---值 -->
      <el-option
        v-for="item in books"
        :key="item.id"

        :label="item.bookname"
        :value="item.id">
      </el-option>

    </el-select>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      options: [{
        value: '1',
        label: '体育'
      }, {
        value: '2',
        label: '文学'
      }],
      books: [],
      value1: '',
      value2: ''
    }
  },
  methods: {
    hChange (curValue) {
      console.log(curValue)
      // 发请求
      axios({
        url: 'http://www.itcbc.com:3006/api/getbooks',
        params: {
          appkey: '13200008888'
        },
        method: 'GET'
      }).then(res => {
        console.log('回来的数据是', res)
        this.books = res.data.data
      })
    }
  }
}
</script>
